<template>
  <ul class="container">
    <li>
      <svg-icon
        name="home"
        :color="displayMenu.get('icon').color"
        :size="displayMenu.get('icon').size"
        v-show="displayMenu.get('icon').active"
      />
      <span
        v-show="displayMenu.get('text').active"
        :style="{
          fontSize: displayMenu.get('text').size,
          color: displayMenu.get('text').color,
        }"
      >
        首页
      </span>
    </li>
    <li>
      <svg-icon
        :size="displayMenu.get('icon').size"
        :color="displayMenu.get('icon').color"
        name="zhaohuaxishi"
        v-show="displayMenu.get('icon').active"
      />
      <span
        v-show="displayMenu.get('text').active"
        :style="{
          fontSize: displayMenu.get('text').size,
          color: displayMenu.get('text').color,
        }"
      >
        朝花夕拾
      </span>
    </li>
  </ul>
</template>

<script lang="ts" setup>
import SvgIcon from '@/components/icon/SvgIcon.vue'
import { inject, onMounted } from 'vue'
import type { DisplayMenu } from '@/components/home/type/DisplayMenu'
const displayMenu = inject<Map<string, DisplayMenu>>('displayMenu')

onMounted(() => {
  const elements = document.querySelectorAll(
    '*:not(script):not(style):not(br):not(hr):not(img):not(input):not(textarea):not(select):not(option):not(meta):not(head):not(title):not(link):not(base):not(template):not(canvas):not(svg):not(video):not(audio):not(source):not(track):not(embed):not(object):not(iframe):not(noscript):not(keygen):not(map):not(area)[data-page-title*="首页"]',
  )
  console.log(elements, '111')
})
</script>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  margin-left: @marginLeft;
  li {
    display: flex;
    align-items: center;
    margin-top: @marginTop;
    padding-left: 5px;
    padding-right: 5px;
  }
  li:hover{
    cursor: pointer;
  }
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
